/* p {
    color: red;
    width: 500px;
    border: 1px solid black;
  }


li,
h1 {
  color: red;
} */

    html {
        font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
        font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
    }

    h1 {
        font-size: 60px;
        text-align: center;
    }
    
    p,
    li {
        font-size: 16px;
        line-height: 2;
        letter-spacing: 1px;
    }

    html {
        background-color: #00539f;
    }

  body {
    width: 600px;   /* 强制文档体永远保持 600 像素宽。*/
    /*
    当你在 margin 或 padding 这样的属性上设置两个值时，第一个值影响元素的上下方向（在这个例子中设置为 0）；
    第二个值影响左右方向。（这里，auto 是一个特殊的值，它将可用的水平空间平均分配给左边和右边）。
    如 margin 语法中所记载的那样，你也可以使用一个、两个、三个或四个值。
    */
    margin: 0 auto;
    background-color: #ff9500;
    /*
    我们给内边距设置了四个值，目的是给内容四周留出一点空间。这一次我们不设置 body 上方的内边距，设置右边、下方、左边的内边距为 20 像素。
    值以上、右、下、左的顺序排列。与 margin 一样，你也可以像 padding 语法中所记载的那样，使用一个、两个、三个或四个值。
    */
    padding: 0 20px 20px 20px;
    /*
    这是为边框的宽度、样式和颜色设置的值。在本例中，是 body 四周的一个 5 像素宽的纯黑色边框。
    */
    border: 5px solid black;
  }
  
  h1 {
    /*margin: 0; 覆盖浏览器的默认样式*/
    margin: 0;
    /*将标题的上下内边距设置为 20 像素。*/
    padding: 20px 0;
    /*将标题文本的背景颜色设置为和 HTML 的背景颜色一样的颜色。*/
    color: #00539f;
    /*
     对元素的文本内容施加阴影，
     第一个像素值设置阴影与文本的水平偏移量：阴影水平方向移动的距离（译者注：向右为正值）。
     第二个像素值设置阴影与文本的垂直偏移量：阴影垂直方向移动的距离（译者注：向下为正值）。
     第三个像素值设置阴影的模糊半径。值越大产生的阴影越模糊。
     第四个值设置阴影的基色。
    */
    text-shadow: 3px 3px 1px black;
  }
/*
<body> 元素是块级元素，意味着它占据页面上的空间。页面上的其他元素会尊重为块级元素设置的外边距。
而图片是行级元素，所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。
下面的做法假定所选图片小于 body 的宽度（600 像素）。超过 600 像素的图片会溢出 body 并占据页面的其他位置。
要解决这个问题，可以：1）使用图片编辑器 减小图片宽度；2）用 CSS 限制图片大小，将 <img> 元素 width 属性的值设置为小于 600 像素的值。
*/
  img {
    display: block;
    margin: 0 auto;
  }